<template>
  <div class="mainContent">
    <div class="LoginBox">
      <el-form ref="form" :model="LoginForm" label-width="atuo">
        <el-form-item >
          <span style="font-size:26px">登录</span>
        </el-form-item>
        <el-form-item prop='account' class="LoginInput">
          <el-input v-model="LoginForm.account" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop='password' class="LoginInput">
          <el-input v-model="LoginForm.password" type="password" placeholder="密码" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleLogin" type="primary" class="login-button" style="width: 100%;">确定</el-button>
        </el-form-item>
        <el-form-item >
          <el-row :gutter="20">
            <el-col :span="6"><el-button type="text" @click="GoRegister">免费注册</el-button></el-col>
            <el-col :span="6"><el-button type="text" @click="GoFPwd">忘记密码？</el-button></el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
  </div>
 
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      LoginForm : {
        account : '',
        password : '',
      }
     
    }
  },
  created() {
  
  },
  methods: {
    handleLogin() {
      let params = {
        usercode : this.LoginForm.account,
        password : this.$MD5(this.LoginForm.password)
      }
      this.api.login(params).then(res => {
        console.log(res);
        let {code, message, data} = res;
        if(['200', 200].includes(code)) {
          console.log("登陆成功");
          localStorage.setItem("token", data.token);
          this.$router.push({path:'/HomePage'});
        }
        else {
            this.$message({
                type: "info",
                message: message
            })
        }
      }).catch(err => {
          this.$message({
              type: "info",
              message: err
          })
      })
    },
    // 跳转注册
    GoRegister(){
      this.$router.push({path:'/user/register'})
    },
    // 跳转忘了密码
    GoFPwd(){
      this.$router.push({path:'/user/forgetPassword'})
    }
  },
}
</script>

<style scoped>
.mainContent{
  background-color: orange;
  padding: 80px 280px;
}
.LoginBox{
  width: 380px;
  height: 360px;
  background-color: white;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.LoginInput{
  width: 300px;
}
</style>

